<template>
    <div :class="className" :id="id" :style="{height:height,width:width}"  ref="echart">
        
    </div>
</template>

<script>
export default {
    props:{
        option:{
            type:Object,
            default:function(){
                return {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }]
                }
            }
        },
        className: {
            type: String,
            default: 'my-echarts'
        },
        id: {
            type: String,
            default: 'my-echart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        },
    },
    data(){
        return {
            echarts:null
        }
    },
    watch:{
        option:{
            // immediate:true,
            handler:function(val){
                this.init();
            }
        }
    },
    methods:{
        init(){
            // console.log(this.$echarts)
           if(this.echarts){
                this.echarts.dispose()
            }
           this.echarts = this.$echarts.init(this.$refs.echart);
           this.echarts.setOption(this.option);
        }
    },
    mounted(){
        this.init();
        let _this = this;
        window.addEventListener("resize",function (event) {   //改变窗口大小，echarts图表响应式改变
            _this.echarts.resize();
        })
    }
}
</script>

<style lang="scss" scoped>

</style>